<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: solid 1px black;
				display: block;
				margin: 0 auto;
			}
		</style>
		<script type="text/javascript">
			document.addEventListener("DOMContentLoaded",function(){
				var canvas = document.querySelector("canvas");
				var ctx = canvas.getContext("2d");				
				setInterval(fn,1000);
				fn();
				function fn(){
					canvas.width=600;
					canvas.height=600;								
					ctx.translate(300,300);
					var crg = ctx.createRadialGradient(0,0,0,0,0,200);
					//添加渐变颜色
					crg.addColorStop(0,"white");
					crg.addColorStop(1,"blue");
					//设置 填充样式为延续渐变的样式
					ctx.fillStyle=crg;
					ctx.arc(0,0,200,0,360*Math.PI/180,false);
					ctx.fill();
					ctx.lineWidth = 3;
					ctx.strokeStyle="red";
					ctx.arc(0,0,200,0,360*Math.PI/180,false);
					ctx.stroke();
					ctx.beginPath();
					ctx.arc(0,0,194,0,360*Math.PI/180,false);
					ctx.stroke();
					//刻度3，6，9，12
					ctx.beginPath();
					ctx.fillStyle="red";
					for(var i=0;i<4;i++){
						ctx.fillRect(-5,-194,10,20);
						ctx.rotate(90*Math.PI/180);
					}
					//刻度1，2，3，4，5，6，7...12
					for(var i=0;i<12;i++){
						ctx.fillRect(-3,-194,6,14);
						ctx.rotate(30*Math.PI/180);
					}
					//刻度1，2，3，4，5，6，7...60
					for(var i=0;i<60;i++){
						ctx.fillRect(-2,-194,4,10);
						ctx.rotate(6*Math.PI/180);
					}
					//获取当前时间
					var d = new Date();
					var h = d.getHours();
					var m = d.getMinutes();
					var s = d.getSeconds();
					ctx.save();
					//时针
					ctx.rotate((h+m/60+s/3600)*360*Math.PI/180/12);
					ctx.fillRect(-5,-100,10,100);
					ctx.moveTo(0,-116);
					ctx.lineTo(-10,-100);
					ctx.lineTo(10,-100);
					ctx.closePath();
					ctx.fill();
					//分针
					ctx.restore();
					ctx.save();
					ctx.beginPath();
					ctx.rotate((m+s/60)*360*Math.PI/180/60);
					ctx.fillStyle="black";
					ctx.fillRect(-4,-120,8,120);
					ctx.moveTo(0,-136);
					ctx.lineTo(-8,-120);
					ctx.lineTo(8,-120);
					ctx.closePath();
					ctx.fill();
					//秒针
					ctx.restore();
					ctx.save();
					ctx.beginPath();
					ctx.rotate(s*6*Math.PI/180);
					ctx.fillStyle="rgb(183,26,27)";
					ctx.fillRect(-3,-160,6,160);
					ctx.moveTo(0,-176);
					ctx.lineTo(-6,-160);
					ctx.lineTo(6,-160);
					ctx.closePath();
					ctx.fill();
					//圆心
					ctx.beginPath();
					ctx.fillStyle="black";
					ctx.arc(0,0,10,0,360*Math.PI/180,false);
					ctx.fill();
				}

			})
		</script>
	</head>
	<body>
		<h1 align="center">canvas实现时钟效果</h1>
		<canvas width="600" height="600"></canvas>
	</body>
</html>
